<template>
    <div style="padding: 17px">
      <Breadcrumb/>
        <div>
            <el-button type="primary" style="margin-top: 15px;color: #fff;font-size: 12px;background-color: #1890ff;" @click="addItem">添加项目</el-button>
        </div>
        <div>
            <el-table :data="tableData" border style="width: 100%;margin-top: 20px;color: #909399;font-size: 12px;">
                <el-table-column prop="time" label="ID" width="100"/>
                <el-table-column prop="name" label="项目名称" width="150"/>
                <el-table-column prop="age" label="项目公司" width="150"/>
                <el-table-column prop="age" label="代理商" width="150"/>
                <el-table-column prop="age" label="项目管理员" width="150"/>
                <el-table-column prop="age" label="项目地址" width="150"/>
                <el-table-column prop="age" label="维护单位" width="150"/>
                <el-table-column align="center" label="操作" fixed="right">
                    <template v-slot="scope">
                        <el-button type="primary" size="small" icon="Edit" @click="editRole(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" icon="Delete" @click="deleteRole(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"

                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <el-dialog :close-on-click-modal="false" v-model="addItemDialog" title="添加项目" style="width: 50%;">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" label-position="right" class="demo-ruleForm">
                <el-form-item label="项目名称" prop="xmmc" style="width: 90%">
                    <el-input v-model="ruleForm.xmmc" class="input-size" placeholder="项目名称"></el-input>
                </el-form-item>
                <el-form-item label="项目建设方" prop="xmjsf" style="width: 90%">
                    <el-input v-model="ruleForm.xmjsf" class="input-size" placeholder="项目建设方"></el-input>
                </el-form-item>
                <el-form-item label="承建单位" prop="cjdw" style="width: 90%">
                    <el-input v-model="ruleForm.cjdw" class="input-size" placeholder="承建单位"></el-input>
                </el-form-item>
                <el-form-item label="管理员电话" prop="glydh" style="width: 90%">
                    <el-input v-model="ruleForm.glydh" class="input-size" placeholder="此电话是APP注册用户，更换其他用户表示修改项目拥有人"></el-input>
                </el-form-item>
                <el-form-item label="管理员姓名" prop="glyxm" style="width: 90%">
                    <el-input v-model="ruleForm.glyxm" class="input-size" placeholder="管理员姓名"></el-input>
                </el-form-item>
                <el-form-item label="维护单位" prop="whdw" style="width: 90%">
                    <el-input v-model="ruleForm.whdw" class="input-size" placeholder="维护单位"></el-input>
                </el-form-item>
                <el-form-item label="主维护人电话" prop="zwhrdh" style="width: 90%">
                    <el-input v-model="ruleForm.zwhrdh" class="input-size" placeholder="此电话是APP注册用户，更换其他用户表示修改项目拥有人"></el-input>
                </el-form-item>
                <el-form-item label="主维护人姓名" prop="zwhrxm" style="width: 90%">
                    <el-input v-model="ruleForm.zwhrxm" class="input-size" placeholder="主维护人姓名"></el-input>
                </el-form-item>
                <el-form-item label="所在省份" prop="tel" style="width: 40%">
                    <el-input v-model="ruleForm.tel" class="input-size" placeholder="所在省份"></el-input>
                </el-form-item>
                <el-form-item label="所在城市" prop="age" style="width: 40%">
                    <el-input v-model="ruleForm.age" class="input-size" placeholder="所在城市"></el-input>
                </el-form-item>
                <el-form-item label="所在市辖区" prop="tel" style="width: 40%">
                    <el-input v-model="ruleForm.tel" class="input-size" placeholder="所在市辖区"></el-input>
                </el-form-item>
                <el-form-item label="所在乡镇" prop="age" style="width: 40%">
                    <el-input v-model="ruleForm.age" class="input-size" placeholder="所在乡镇"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="xxdz" style="width: 90%">
                    <el-input v-model="ruleForm.xxdz" class="input-size" placeholder="详细地址"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="sex" style="width: 40%">
                    <el-select style="color: #3A71A8" v-model="ruleForm.sex" placeholder="状态">
                      <el-option label="无效" value="0"></el-option>
                      <el-option label="有效" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button style="font-size: 12px" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button style="font-size: 12px;color: #606266" @click="reset">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb.vue";

export default {
    name: "Project",
  components: {Breadcrumb},
    data() {
        return{
            addItemDialog: false,
            tableData:[],
            ruleForm:[],
            rules: {
                xmmc: [
                    {required: true, message: '请输入项目名称', trigger: 'blur'},
                ],
                xmjsf: [
                    {required: true, message: '请输入项目建设方', trigger: 'blur'},
                ],
                cjdw: [
                    {required: true, message: '请输入承建单位', trigger: 'blur'},
                ],
                glydh: [
                    {required: true, message: '请输入管理员电话', trigger: 'blur'}
                ],
                glyxm: [
                    {required: true, message: '请输入管理员姓名', trigger: 'blur'},
                ],
                whdw: [
                    {required: true, message: '请输入维护单位', trigger: 'blur'},
                ],
                zwhrdh: [
                    {required: true, message: '请输入主维护人电话', trigger: 'blur'},
                ],
                zwhrxm: [
                    {required: true, message: '请输入主维护人姓名', trigger: 'blur'},
                ],
                xxdz: [
                    {required: true, message: '请输入详细地址', trigger: 'blur'},
                ],
            },
            currentPage: 1,
            pageSize: 10,
            total: 10,
        }
    },
    methods: {
        // 添加项目
        addItem(){
            this.addItemDialog = true;
        },
        handleSizeChange(pageSize) {   // 改变当前每页的个数触发
          this.pageSize = pageSize
          this.load()
        },
        handleCurrentChange(pageNum) {  // 改变当前页码触发
          this.currentPage = pageNum
          this.load()
        },
    }
}
</script>

<style scoped>
:deep(.el-table th .cell)  {
  font-weight: 700
}
:deep(.el-form-item__label) {
  font-size: 14px;
  font-weight: 700
}
.input-size {
  font-size: 13px;
}
.el-select-dropdown__item.--el-text-color-regular{
  color: #3A71A8;
}
</style>
